<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div id="app">
      <div class="header">web练习</div>
      <div class="content">
        <div class="content-left">
          <ul class="content-left-menu">
            <li>yz</li>
            <li>zyl</li>
          </ul>
        </div>
        <div class="content-right">
          <iframe
            id="iframe"
            width="100%"
            style="
              height: calc(100% - 4px);
              width: 100%;
              background-color: blanchedalmond;
            "
            frameborder="0"
          ></iframe>
        </div>
      </div>
    </div>
    <script>
      var current = "yz";
      window.onload = function () {
        var iframeEl = document.getElementById("iframe");
        var lis = document.querySelectorAll(".content-left-menu>li");
        lis.forEach((item) => {
          item.onclick = function () {
            lis.forEach((item) => {
              item.setAttribute("class", "");
            });
            item.setAttribute("class", "active");
            iframeEl.setAttribute("src", "./" + item.innerHTML + "/index.html");
          };
          if (item.innerHTML === current) {
            item.setAttribute("class", "active");
          }
        });
        iframeEl.setAttribute("src", "./" + current + "/index.html");
      };
    </script>
  </body>
</html>
